<template>
	<view>
		<view class="app">
			<view class="content">
				<!-- :layer-style="5" -->
				<!-- 地图 -->
				<map name="" id="map1" ref="map1" style="width: 750px; height: 90vh;" show-location :latitude="latitude"
					:longitude="longitude" :markers="marker" :scale="scale" :circles="circles" enable-poi="true"
					@markertap="markertap" @tap="tap" @poitap="poitap" @anchorpointtap="anchorpointtap"
					@callouttap="callouttap" :polyline="polyline">
					<!-- 搜索框 -->
					<view class="" :style="{
              position: 'absolute',
              left: '32rpx',
              top: navHeight + 'px',
            }">
						<u-search @focus="focus" @blur="blur" @clickIcon="clickIcon" @change="searchCompanyChange"
							@search="searchCompanySearch" searchIconSize="38" search-icon="/static/img/index/avatar.png"
							customStyle="width: 586rpx;height: 84rpx;ackground: #FFF;border-radius: 42rpx 42rpx 42rpx 42rpx;opacity: 1"
							:showAction="false" placeholder="在此处搜索" v-model="keyword" :clearabled="true"
							searchIconColor="#7d7d7d" bgColor="#ffffff"></u-search>
					</view>
					<!-- 搜素列表 -->
					<view class="" v-if="searchShow" :style="{
              position: 'absolute',
              left: '32rpx',
              top: navHeight + 42 + 8 + 'px',
              'z-index': 66,
            }">
						<scroll-view class="" scroll-y="true" style="
                height: 200px;
                width: 586rpx;
                background-color: #fff;
                border-radius: 42rpx 42rpx 42rpx 42rpx;
              ">
							<view class="list">
								<view class="item" @click="goMove(item.location)" v-for="item in searchRe"
									:key="item.id">
									<view class="ml20 mr30">
										<view class="" style="font-weight: 600; font-size: 38rpx;">
											{{ item.title }}
										</view>
										<view class="color_98" style="font-size: 24rpx;">
											{{ item.address }}
										</view>
									</view>
									<u-line></u-line>
								</view>
							</view>
						</scroll-view>
					</view>

					<!-- 加号 -->
					<view class="" :style="{
              position: 'absolute',
              left: '87vw',
              top: navHeight + 'px',
            }">
						<view class="" @click="addShowChange" class="flex-cen" style="
                width: 84rpx;
                height: 84rpx;
                border-radius: 50%;
                background-color: #fff;
              ">
							<image src="" mode="" src="../../static/img/index/sizijia.svg" mode=""
								style="width: 40rpx; height: 40rpx;"></image>
						</view>
						<!-- 动画jin -->
						<!-- animate__fadeOut -->
						<view ref="addRef" class="tip flex-column animate__animated animate__fadeIn"
							:style="{ 'z-index': 66, position: 'absolute' }" v-if="addShow">
							<view class="triangle"></view>
							<!-- 										<view class="flex-cen" style="height: 105rpx;">
								<image src="/static/img/index/54626.svg" mode="" style="width: 38rpx;height: 26rpx;"></image>
								<view class="ml20 size_34 color_fff">发起圈聊</view>
							</view> -->
							<<<<<<< HEAD <view class="flex-cen" style="height: 105rpx;">
								<image src="/static/img/index/54628.svg" mode="" style="width: 39rpx; height: 36rpx;">
								</image>
								<view class="ml20 size_34 color_fff" @click="$pub.go('/pages/addFriend/addFriend')">
									添加圈友
								</view>
						</view>
						<view class="flex flex-align" style="height: 105rpx;">
							<image class="ml36 mr20" src="/static/img/index/54630.svg" mode=""
								style="width: 39rpx; height: 39rpx;"></image>
							<view class="size_34 color_fff" @click="qrCode">扫一扫</view>
						</view>
					</view>
			</view>
			<!-- tagbs -->
			<view class="tabs" :style="{
              position: 'absolute',
              left: '32rpx',
              top: navHeight + 42 + 11 + 'px',
            }">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="scroll-view-item_H uni-bg-red" v-for="(item, index) in tabsList" :key="index"
						@click="tagbsHandle(index)">
						<view class="item">
							<view class="flex">
								<view class="tp">
									<image :src="item.url" mode="" style="width: 26rpx; height: 26rpx;"></image>
								</view>
								<view class="name">
									<view class="url">{{ item.name }}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 圈子2 -->
			<view class="" :style="{
              position: 'absolute',
              left: '32rpx',
              top: navHeight + 42 + 11 + 'px',
            }" @click="$pub.go('/pages_quanzi2/quanzi/quanzi')">
				圈子212312312aaaaaaaa
			</view>
			<!-- 蓝牙通知 -->
			<view class="" :style="{
              position: 'absolute',
              left: '32rpx',
              top: '500px',
            }">
				<view class="blueTouch">
					<view class="flex">
						<view class="item mr12 flex-cen">
							<view class="">
								<image src="/static/img/index/blueTouch.svg" mode=""
									style="width: 38rpx; height: 32rpx;"></image>
								<view class="text">未连接</view>
							</view>
						</view>
						<view class="item flex-cen">
							<image src="/static/img/index/bell.svg" mode="" style="width: 40rpx; height: 46rpx;">
							</image>
							<view class="flex-c"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 消息 -->
			<view class="" :style="{
              position: 'absolute',
              left: '87vw',
              top: '500px',
            }">
				<view class="" class="flex-cen" @click="sendMessage" style="
                width: 84rpx;
                height: 84rpx;
                border-radius: 50%;
                background-color: #fff;
              ">
					<image src="" mode="" src="../../static/img/index/message.svg" mode=""
						style="width: 48rpx; height: 38rpx;"></image>
				</view>
			</view>
			<!-- 定位 -->
			<view class="" :style="{
              position: 'absolute',
              left: '87vw',
              top: '550px',
            }">
				<view class="" class="flex-cen" @click="getGps" style="
                width: 84rpx;
                height: 84rpx;
                border-radius: 50%;
                background-color: #fff;
              ">
					<image src="" mode="" src="../../static/img/index/gps.svg" mode=""
						style="width: 48rpx; height: 48rpx;"></image>
				</view>
			</view>
			</map>
			=======
			<view class="flex-cen" style="height: 105rpx;">
				<image src="/static/img/index/54628.svg" mode="" style="width: 39rpx;height: 36rpx;">
				</image>
				<view class="ml20 size_34 color_fff" @click="$pub.go('/pages/addFriend/addFriend')">添加圈友
				</view>
			</view>
			<view class="flex flex-align" style="height: 105rpx;">
				<image class="ml36 mr20" src="/static/img/index/54630.svg" mode="" style="width: 39rpx;height: 39rpx;">
				</image>
				<view class="size_34 color_fff" @click="qrCode">扫一扫</view>
			</view>
		</view>
	</view>
	<!-- tagbs -->
	<view class="tabs" :style="{
							position: 'absolute',
							left: '32rpx',
							top:navHeight + 42 + 11 + 'px'
						}">
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
			<view class="scroll-view-item_H uni-bg-red" v-for="(item, index) in tabsList" :key="index"
				@click="tagbsHandle(index)">
				<view class="item">
					<view class="flex">
						<view class="tp">
							<image :src="item.url" mode="" style="width: 26rpx;height: 26rpx;"></image>
						</view>
						<view class="name">
							<view class="url">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- 圈子2 -->
	<view class="" :style="{
							position: 'absolute',
							left: '32rpx',
							top:navHeight + 42 + 11 + 'px'
						}" @click="$pub.go('/pages_quanzi2/quanzi/quanzi')">
		圈子212312312 bbbbb
	</view>
	<view class="">
		3333
	</view>
	<!-- 蓝牙通知 -->
	<view class="" :style="{
							position: 'absolute',
							left: '32rpx',
							top: '500px'
						}">
		<view class="blueTouch">
			<view class="flex">
				<view class="item mr12 flex-cen">
					<view class="">
						<image src="/static/img/index/blueTouch.svg" mode="" style="width: 38rpx;height: 32rpx;">
						</image>
						<view class="text">未连接</view>
					</view>
				</view>
				<view class="item flex-cen">
					<image src="/static/img/index/bell.svg" mode="" style="width: 40rpx;height: 46rpx;">
					</image>
					<view class="flex-c"></view>
				</view>
			</view>
		</view>
	</view>
	<!-- 消息 -->
	<view class="" :style="{
							position: 'absolute',
							left: '87vw',
							top: '500px'
						}">
		<view class="" class="flex-cen" @click="sendMessage"
			style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
			<image src="" mode="" src="../../static/img/index/message.svg" mode="" style="width: 48rpx;height: 38rpx;">
			</image>
		</view>
	</view>
	<!-- 定位 -->
	<view class="" :style="{
							position: 'absolute',
							left: '87vw',
							top: '550px'
						}">
		<view class="" class="flex-cen" @click="getGps"
			style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFF;">
			<image src="" mode="" src="../../static/img/index/gps.svg" mode="" style="width: 48rpx;height: 48rpx;">
			</image>
		</view>
	</view>
	</map>
	>>>>>>> new

	<!-- 消息弹框 -->
	<u-overlay :show="messageShow" @click="overlayClick">
		<view class="ml30 mr30">
			<view class="h" :style="{ height: navHeight + 'px' }"></view>
			<view class="flex">
				<u-search id="searchRef" ref="searchRef" searchIconSize="38" search-icon="/static/img/index/avatar.png"
					customStyle="width: 578rpx;height: 84rpx;background: #F6F6F6;border-radius: 42rpx 0rpx 0rpx 42rpx;opacity: 1;"
					:showAction="false" placeholder="输入即时消息" v-model="messageKey" :clearabled="true"
					@focus="messageFocus" :focus="messageTrue" searchIconColor="#7d7d7d" bgColor="#F6F6F6"></u-search>
				<view class="flex-cen" style="
                  width: 112rpx;
                  height: 84rpx;
                  background: #a14bff;
                  border-radius: 0rpx 42rpx 42rpx 0rpx;
                  opacity: 1;
                ">
					<view class="" style="
                    width: 56rpx;
                    height: 40rpx;
                    font-size: 28rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                  ">
						搜索
					</view>
				</view>
			</view>
		</view>
	</u-overlay>

	<!-- 抽屉左 -->
	<u-popup mode="left" :overlay="true" :customStyle="{
            'box-shadow': '0rpx 6rpx 60rpx 2rpx rgba(0,0,0,0.16)',
            width: '250px',
          }" :overlayOpacity="0" :show="drawer" @close="drawerClose" @open="drawerOpen">
		<view class="u-popup-slot">
			<!--  -->
			<view class="" :style="{ height: statusBarHeight }"></view>
			<!-- content -->
			<view class="ml80">
				<!-- 1 -->
				<view class="" @click="$pub.go('/pages_person/personMessage/personMessage')">
					<!-- <image src="/static/img/index/b9ebecaa592ab6889864bbd24ecb2002.svg" mode="" style="width: 84rpx;height: 84rpx;"></image> -->
					<!-- text="北" -->
					<!-- randomBgColor -->
					<u-avatar :src="userInfo.uavatar" fontSize="18"></u-avatar>
				</view>
				<!-- 2 -->
				<view class="flex-column">
					<view class="mt32">{{ userInfo.unickName }}</view>
					<view class="mt2 color_A5">签名我的个性签名</view>
					<view class="flex mt16">
						<view class="flex-cen mr50">
							<view class="mr13">{{ userInfo.groupNumber }}</view>
							<view class="mr10">圈子</view>
							<image src="/static/img/index/lock_open.svg" mode="" style="width: 23rpx; height: 23rpx;">
							</image>
						</view>
						<view class="flex-cen">
							<view class="mr12">{{ userInfo.friendNumber }}</view>
							<view class="mr12">好友</view>
							<image src="/static/img/index/lock.svg" mode="" style="width: 23rpx; height: 23rpx;">
							</image>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="line mt38"></view>
				<!-- 4 -->
				<view class="mt52">
					<view class="flex flex-align" @click="$pub.go('/pages_user/my/my')">
						<image class="mr54" src="/static/img/index/155.svg" mode=""
							style="width: 36rpx; height: 40rpx;"></image>
						<view class="size_40">个人资料</view>
					</view>
					<view class="flex flex-align mt50" @click="$pub.go('/pages_sysSet/settings/settings')">
						<image class="mr54" src="/static/img/index/440.svg" mode=""
							style="width: 36rpx; height: 37rpx;"></image>
						<view class="size_40">系统设置</view>
					</view>
				</view>
			</view>
			<!--  -->
		</view>
	</u-popup>

	<!-- 最上弹框 -->
	<view>
		<u-popup :show="show" @close="close" @open="open" mode="top" :overlay="false">
			<view class="" style="#FFF">
				<view class="ml30 mr30">
					<view class="h" :style="{ height: navHeight + 'px' }"></view>
					<view class="flex">
						<u-search searchIconSize="38" search-icon="/static/img/index/avatar.png"
							customStyle="width: 578rpx;height: 84rpx;background: #F6F6F6;border-radius: 42rpx 0rpx 0rpx 42rpx;opacity: 1;"
							:showAction="false" placeholder="在此处搜索" v-model="keyword" :clearabled="true"
							searchIconColor="#7d7d7d" bgColor="#F6F6F6"></u-search>
						<view class="flex-cen" style="
                      width: 112rpx;
                      height: 84rpx;
                      background: #a14bff;
                      border-radius: 0rpx 42rpx 42rpx 0rpx;
                      opacity: 1;
                    ">
							<view class="" style="
                        width: 56rpx;
                        height: 40rpx;
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                      ">
								搜索
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>

	<!-- 三段弹框 -->
	<view class="">
		<danH-threeDrawer ref="panelref" :isMiddle="isMiddle" :panlPercent="panlPercent" :bottomSpac="bottomSpac"
			:middleSpace="middleSpace" :movePercentage="movePercentage" :topSpac="topSpac"
			@movePercentage="movePercentage">
			<view style="width: 100%; height: 100%;">
				<view class="ml32 mr32">
					<!-- width: '136rpx', -->
					<!-- width: '60rpx', -->
					<u-tabs :list="list1" scrollable="true" lineWidth="8" lineHeight="3" lineColor="#353535"
						:activeStyle="{
                    height: '48rpx',
                    'font-size': '34rpx',
                    'font-family': 'PingFang SC-Semibold PingFang SC',
                    'font-weight': '600',
                    color: '#353535',
                  }" :inactiveStyle="{
                    height: '42rpx',
                    'font-size': '30rpx',
                    'font-family': 'PingFang SC-Semibold, PingFang SC',
                    'font-weight': '600',
                    color: '#919191',
                  }"></u-tabs>
				</view>
				<!-- @touchmove.stop.prevent="" @touchstart.stop="" @touchend.stop="" -->
				<!-- style="height: 100%; overflow-y: scroll" -->
				<scroll-view :scroll-y="scrollStatus" style="height: 100%;" upper-threshold="" lower-threshold=""
					@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll">
					<view class="">
						<view class="item mt22 ml30 mr32" v-for="(i, index) in 6" :key="index" style="
                      width: 690rpx;
                      height: 576rpx;
                      background: #2d2c2a;
                      border-radius: 22rpx 22rpx 22rpx 22rpx;
                      opacity: 1;
                      z-index: 9999999;
                    "></view>
					</view>
				</scroll-view>
			</view>
		</danH-threeDrawer>
	</view>

	<!-- 底部 -->
	<tabbar></tabbar>
	</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState, //先导入mapState方法
		mapMutations,
	} from 'vuex'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	// var navHeight = getApp().globalData.navHeight + 'px';
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				/* 即时消息 */
				messageTrue: false,
				messageKey: '',
				/* 消息弹框 */
				messageShow: false,
				/* 加号 */
				addShow: false,
				/* 抽屉左 */
				drawer: false,
				/* 腾讯地图 */
				qqmapsdk: null,
				/* 搜素结果 */
				searchRe: [],
				searchShow: false,
				/* 上弹框 */
				show: false,
				/* 三段 */
				differential: 0,
				move: false,
				/* 比较值 */
				panlPercent: 60,
				/* 最小高度rpx */
				// bottomSpac: 220,
				bottomSpac: 240,
				/* 中间状态高度，默认计算最高到最低高度的一半 */
				// middleSpace: 250,
				// middleSpace: 280,
				/* 初始化时是否在中间位置 */
				isMiddle: true,
				/* 滚动台哦 */
				scrollStatus: false,

				/* tabs */
				list1: [{
						name: '精彩推荐',
					},
					{
						name: '动态',
					},
					{
						name: '视频',
					},
					{
						name: '话题',
					},
					{
						name: '更多',
					},
					{
						name: '更多',
					},
					{
						name: '更多',
					},
					{
						name: '更多',
					},
					{
						name: '更多',
					},
					{
						name: '更多',
					},
				],

				/* 搜素框 */
				keyword: '',
				/* 分类 */
				tabsList: [{
						name: '家庭',
						url: '/static/img/index/people.svg',
					},
					{
						name: '推荐',
						url: '/static/img/index/hot.svg',
					},
					{
						name: '商圈',
						url: '/static/img/index/package.svg',
					},
					{
						name: '交友',
						url: '/static/img/index/chat.svg',
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg',
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg',
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg',
					},
					{
						name: '--',
						url: '/static/img/index/cafe.svg',
					},
				],

				/* 状态栏高度 */
				statusBarHeight: statusBarHeight,
				/* 胶囊高度 */
				navHeight: 0,
				/* 地图 */
				mapContext: null,
				latitude: 22.543473, //纬度
				longitude: 113.948001, //经度
				nowLatitude: 0,
				nowLongitude: 0,
				scale: 13, //缩放级别
				bottomData: false,
				marker: [{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						// callout: {
						// 	//自定义标记点上方的气泡窗口 点击有效
						// 	content: '天瑞广场A座', //文本
						// 	color: '#ffffff', //文字颜色
						// 	fontSize: 16, //文本大小
						// 	borderRadius: 15, //边框圆角
						// 	borderWidth: '12',
						// 	bgColor: '#9f5bfa', //背景颜色
						// 	display: 'ALWAYS' //常显
						// },
						label: {
							//标签设置
							content: '深圳欢乐谷',
							padding: 8,
							fontSize: 12,
							color: '#000000',
							textAlign: 'center',
							fontWeight: 'blod',
							x: 0,
							y: 0,
							anchorX: 60,
							anchorY: -30,
						},
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: '/static/img/index/54171.png', //显示的图标
						rotate: 0, // 旋转度数
						width: 55, //宽
						height: 70, //高
						alpha: 1, //透明度
						controls: [{
							//在地图上显示控件，控件不随着地图移动
							id: 31, //控件id
							iconPath: '/static/logo.png', //显示的图标
							position: {
								//控件在地图的位置
								left: 50,
								top: 50,
								width: 55,
								height: 70,
							},
						}, ],
					},
				],
				circles: [{
						//在地图上显示圆
						latitude: 22.543888,
						longitude: 113.947975,
						fillColor: '#a2a0eaAA', //填充颜色
						color: '#a2a0ea', //描边的颜色
						// radius: 20, //半径
						radius: 123, //半径
						strokeWidth: 1, //描边的宽度
						alpha: 0.2,
					},
					{
						//在地图上显示圆
						latitude: 22.543888,
						longitude: 113.947975,
						fillColor: '#a2a0eaAA', //填充颜色
						color: '#a2a0ea', //描边的颜色
						// radius: 20, //半径
						radius: 217, //半径
						strokeWidth: 1, //描边的宽度
						alpha: 0.12,
					},
					{
						//在地图上显示圆
						latitude: 22.543888,
						longitude: 113.947975,
						fillColor: '#a2a0eaAA', //填充颜色
						color: '#a2a0ea', //描边的颜色
						// radius: 20, //半径
						radius: 314, //半径
						strokeWidth: 1, //描边的宽度
						alpha: 0.06,
					},
				],
				// polyline: [
				// 	{
				// 	//指定一系列坐标点，从数组第一项连线至最后一项
				// 	points: [
				// 		{
				// 			latitude: 23.13065,
				// 			longitude: 113.3274
				// 		},
				// 		{
				// 			latitude: 23.106574,
				// 			longitude: 113.324587
				// 		}
				// 	],
				// 	color: '#A054FE', //线的颜色
				// 	width: 4, //线的宽度
				// 	dottedLine: false, //是否虚线
				// 	arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				// },
				// ]
				/* 附近的人 */
				nearByPeoplePeople: [],
				/* 附近的企业 */
				nearByPeopleCompany: [],
				/* 定时器 */
				gpsTimer: null,
			}
		},
		computed: {
			...mapState('websocket', ['messageList']),
			...mapState('user', ['userInfo']),
			/* 最高点距离顶部距离rpx */
			topSpac() {
				return (this.navHeight + 42) * 2
			},
		},
		methods: {
			messageFocus(e) {
				console.log('聚焦了')
			},
			overlayClick() {
				this.messageShow = false
				this.$nextTick(() => {
					this.messageTrue = false
				})
			},
			/* 消息 */
			sendMessage() {
				console.log('消息弹框')
				this.messageShow = true
				this.$nextTick(() => {
					this.messageTrue = true
				})
			},
			/* 加号显示 */
			addShowChange() {
				this.addShow = true
			},
			/* 点击地图 */
			tap() {
				this.addShow = false
			},
			/* 抽屉 */
			drawerOpen() {
				this.drawer = true
				console.log('drawerOpen')
			},
			drawerClose() {
				console.log('drawerClose')
				this.drawer = false
			},

			/*  */
			anchorpointtap(e) {
				console.log(e, 'e')
			},
			poitap(e) {
				console.log(e, 'e')
				// this.scale = 18
				this.mapContext.moveToLocation({
					latitude: e.detail.latitude,
					longitude: e.detail.longitude,
				})
				this.latitude = e.detail.latitude
				this.longitude = e.detail.longitude
			},
			markertap(e) {
				console.log(e, 'e')
			},
			blur() {
				this.searchShow = false
			},
			focus() {
				if (this.searchRe.length === 0) {
					this.searchShow = false
				} else {
					this.searchShow = true
				}
				// this.searchShow = true
			},

			/* 定位寻址 */
			goMove({
				lat,
				lng
			}) {
				this.mapContext.moveToLocation({
					latitude: lat,
					longitude: lng,
				})
			},

			/* 模糊搜素 */
			async searchCompanyChange() {
				this.searchShow = true
				let that = this
				this.qqmapsdk.getSuggestion({
					keyword: this.keyword,
					success: function(res) {
						console.log(res)
						if (data == []) {
							that.searchRe.push({
								title: '暂无数据',
								address: '请输入准确内容',
							})
						}
						let data = res.data
						that.searchRe = data
					},
					fail: function(res) {
						console.log(res)
					},
					complete: function(res) {
						console.log(res)
					},
				})
				// let re = await this.$API.tobApi.findCompanyByName(this.keyword);
				// console.log(re, "re");
			},
			/* 精确搜素 */
			async searchCompanySearch() {
				let that = this
				// let re = await this.$API.tobApi.findCompanyByNameDetail(this.keyword);
				// console.log(re, "re");
				this.qqmapsdk.search({
					keyword: that.keyword,
					success: function(res) {
						console.log(res)
						let data = res.data
						that.searchRe = data
					},
					fail: function(res) {
						console.log(res)
					},
					complete: function(res) {
						console.log(res)
					},
				})
			},

			/* 移动定位 */
			getGps() {
				console.log('移动了位置')
				// this.latitude =
				// this.longitude =
				//将地图移动到定点位置
				// this.mapContext.getCenterLocation({
				// 	success: function(res) {
				// 		console.log(res);
				// 	},
				// 	fail: function(res) {
				// 		console.log(res);
				// 	},
				// 	complete: function(res) {
				// 		console.log(res);
				// 	}
				// })
				console.log(this.latitude, 'this.latitude')
				console.log(this.longitude, 'this.longitude')
				this.mapContext.moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude,
				})
			},
			// 判断点击的tabs
			tagbsHandle(index) {
				if (index === 0) {
					console.log('点击了家庭')
					// this.user()
				} else if (index === 1) {
					console.log('点击了推荐')
					this.company()
				} else if (index === 3) {
					this.getNearUser()
				} else if (index === 2) {
					this.getNearCompany()
				} else {
					console.log('scroll被点击了')
				}
			},

			user() {
				let userList = [{
						id: Math.random(),
						latitude: 23.22481,
						longitude: 113.293911,
						iconPath: '/static/img/index/85.png',
						width: 7,
						height: 7,
						rotate: 0,
						// alpha: 0.53
					},
					{
						id: Math.random(),
						latitude: 23.22479,
						longitude: 113.293922,
						iconPath: '/static/img/index/85.png',
						width: 7,
						height: 7,
						rotate: 0,
						// alpha: 0.53
					},
					{
						id: Math.random(),
						latitude: 23.22482,
						longitude: 113.293933,
						iconPath: '/static/img/index/85.png',
						width: 7,
						height: 7,
						rotate: 0,
						// alpha: 0.53
					},
				]
				this.marker = userList
			},
			company() {
				let companyList = [{
						id: Math.random(),
						latitude: 23.22479,
						longitude: 113.293911,
						iconPath: '/static/img/index/55760.png',
						width: 16,
						height: 16,
						rotate: 0,
					},
					{
						id: Math.random(),
						latitude: 23.224799,
						longitude: 113.293922,
						iconPath: '/static/img/index/55760.png',
						width: 16,
						height: 16,
						rotate: 0,
					},
					{
						id: Math.random(),
						latitude: 23.22481,
						longitude: 113.293933,
						iconPath: '/static/img/index/55760.png',
						width: 16,
						height: 16,
						rotate: 0,
					},
				]
				this.marker = companyList
			},

			/* 上传用户位置 */
			async getUserGps() {
				let data = {
					distence: 5,
					latitude: this.latitude,
					longitude: this.longitude,
				}
				await this.$API.userApi.getUserGps(data)
			},

			/* 获取附近企业 */
			async getNearCompany() {
				let re = await this.$API.tobApi.findNearCompanyList(
					2000,
					this.latitude,
					this.longitude,
				)
				console.log(re, 're')
				this.nearByPeopleCompany = re
				let newData = this.nearByPeopleCompany.map((i) => {
					return {
						id: i.ucompId,
						latitude: i.ulatitude,
						longitude: i.ulongitude,
						iconPath: '/static/img/index/55760.png',
						width: 16,
						height: 16,
						rotate: 0,
						alpha: 0.53,
						uaddress: i.uaddress,
						ucompName: i.ucompName,
						// label: { //标签设置
						// 	content: i.ucompName,
						// 	padding: 8,
						// 	fontSize: 12,
						// 	color: "#000000",
						// 	textAlign: "center",
						// 	fontWeight: 'blod',
						// 	x: 0,
						// 	y: 0,
						// 	anchorX: 30,
						// 	anchorY: -25
						// },
						// label: { //标签设置
						// 	content: i.ucompName,
						// 	bgColor: "rgba(255,255,255,0.71)",
						// 	borderWidth: 1,
						// 	borderColor: '#A5A5A5',
						// 	borderRadius: 4,
						// 	padding: 8,
						// 	fontSize: 16,
						// 	color: "#000000",
						// 	textAlign: "center",
						// 	x: 0,
						// 	y: 0,
						// 	anchorX: 0,
						// 	anchorY: 0
						// },
					}
				})
				this.marker = newData
			},

			/* 获取附近人 */
			async getNearUser() {
				let re = await this.$API.userApi.getNearUser(
					2,
					this.latitude,
					this.longitude,
				)
				console.log(re, 're')
				console.log(this.nearByPeopleData, 'this.nearByPeopleData')
				this.nearByPeopleData = re
				let obj = {}
				let newData = this.nearByPeopleData.map((i) => {
					return {
						id: i.userId,
						latitude: i.position.latitude,
						longitude: i.position.longitude,
						iconPath: '/static/img/index/85.png',
						width: 7,
						height: 7,
						rotate: 0,
						alpha: 0.53,
					}
				})
				console.log(newData, 'newData')
				this.marker = newData
			},
			/* 自己走过的轨迹 */
			async getUserTrack() {
				console.log('轨迹')
				let re = await this.$API.userApi.getUserTrack()
				let lineArr = re
				lineArr.map((i) => {
					return {
						latitude: i.latitude,
						longitude: i.longitude,
					}
				})
				polyline: [{
						//指定一系列坐标点，从数组第一项连线至最后一项
						points: [{
								latitude: 23.13065,
								longitude: 113.3274,
							},
							{
								latitude: 23.106574,
								longitude: 113.324587,
							},
						],
						color: '#A054FE', //线的颜色
						width: 4, //线的宽度
						dottedLine: false, //是否虚线
						arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
					}, ],
					console.log(re, 're')
			},

			/* 滚动 */
			scroll(e) {
				console.log(e, 'e')
			},
			/* 顶 */
			scrolltoupper(e) {
				console.log(e, 'e')
				// this.scrollStatus = false
			},
			/* 底 */
			scrolltolower(e) {
				console.log(e, 'e')
				// this.scrollStatus = false
			},

			/* 搜索框跳转我的 */
			clickIcon() {
				this.drawerOpen()
				// uni.navigateTo({
				// 	url: '/pages_user/my/my'
				// })
			},
			/* 弹框开关 */
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},

			ok() {
				console.log('ok')
			},
			//底部滑动的大小
			movePercentage(percentage) {
				console.log(percentage)
				if (percentage.percent == 100) {
					console.log('高')
					console.log(this.$refs.panelref, 'this.$refs.panelref')
					// this.$refs.panelref.touchendHandle = this.ok()
					// touchendHandle
					this.show = true
					/* 只有在最高点才能拉视频 */
					this.scrollStatus = true
				} else {
					/* 只有在最高点才能拉视频 */
					this.scrollStatus = false
				}
				if (percentage.percent == 50) {
					console.log('中')
					this.show = false
				}
				if (percentage.percent == 0) {
					console.log('低')
					this.show = false
				}
				if (this.panlPercent == percentage.percent) {
					console.log('开始')
					return
				}
				this.panlPercent = percentage.percent
				this.move = false
				if (percentage.isEnd) {
					console.log('结束')
					this.move = true
				}
				this.differential = -(
					((this.maxMapHeight / 3) * percentage.percent) /
					100
				)
			},
		},

		mounted() {
			uni.hideTabBar()
		},

		/* 初始化 */
		onLoad() {
			// 实例化API核心类
			this.qqmapsdk = new QQMapWX({
				key: '5LGBZ-DD3L3-QXC35-3CR45-7RKZT-FFBW6',
			})
		},

		// 监听页面卸载
		onHide() {
			let that = this
			clearInterval(that.timer)
			clearInterval(that.gpsTimer)
		},

		onShow() {
			console.log(getApp().globalData)
			console.log(getApp().globalData.navHeight, 'getApp().globalData.navHeight')
			// 作用域
			let that = this
			/* 获取到胶囊的高度 */
			this.navHeight = getApp().globalData.navHeight
			//创建地图对象
			this.mapContext = uni.createMapContext('map1', this)
			// 获取定位
			uni.getLocation({
				isHighAccuracy: true,
				type: 'gcj02',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude)
					console.log('当前位置的纬度：' + res.latitude)
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.circles = that.circles.map((i) => {
						i.longitude = that.longitude
						i.latitude = that.latitude
						return i
					})
				},
			})
			// 定时器
			this.gpsTimer = setInterval(() => {
				that.getUserGps()
				// that.getNearUser();
			}, 60000)
		},
	}
</script>

<style lang="scss">
	/* 扫一扫 */
	.tip {
		width: 268rpx;
		// height: 314rpx;
		height: 209rpx;
		background: #4c4c4c;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		translate: -70% 5%;
	}

	.blueTouch {
		.item {
			width: 82rpx;
			height: 82rpx;
			background: #ffffff;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
		}

		.flex {
			image {}

			.text {
				// width: 36rpx;
				height: 16rpx;
				font-size: 12rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #31312f;
				// line-height: 0rpx;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}
	}

	/* tabs */
	.scroll-view_H {
		white-space: nowrap;
		width: 750rpx;

		.scroll-view-item_H {
			display: inline-block;
			width: 152rpx;
			height: 58rpx;
			line-height: 58rpx;
			background: #ffffff;
			// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 29rpx 29rpx 29rpx 29rpx;
			opacity: 1;
			margin-left: 14rpx;
		}

		.item {
			.tp {
				padding-left: 14rpx;
			}

			.name {
				margin-left: 14rpx;
			}
		}
	}

	.overlay-wrap {}
</style>
